<template>
  <!-- 学科管理页面 -->
  <div class="app-container">
    <!-- 卡片面板主区域 -->
    <el-card>
      <!-- 搜索nav栏 -->
      <el-row :gutter="10">
        <el-col :span="18">
          <!-- 搜索框 -->
          <el-col :span="6">
            <el-form ref="SearchFrom"
                     label-width="80px"
                     :model="SearchFrom">
              <el-form-item label="学科名称"
                            prop="searchName">
                <el-input @clear="clearSearch"
                          clearable
                          style="height: 32px;"
                          v-model="SearchFrom.searchName"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="18">
            <!-- 清除按钮 -->
            <el-button size="small"
                       @click="clearSearch">清除</el-button>
            <!-- 搜索按钮 -->
            <el-button size="small"
                       type="primary"
                       @click="clickSearch()">搜索</el-button>
          </el-col>
        </el-col>
        <!-- 新增学科按钮 -->
        <el-col :span="6">
          <el-button class="colright"
                     size="mini"
                     type="success"
                     icon="el-icon-edit"
                     @click="isAddShow = true">新增学科</el-button>
        </el-col>
      </el-row>
      <!--   消息文案  alert组件 -->
      <el-alert :title="`数据一共${subjectsList.counts}条`"
                :closable="false"
                type="info"
                show-icon> </el-alert>
      <!-- 表格区域 -->
      <subjects-table :subjectsTableList="subjectsList.items"
                      @getid="getid($event)"
                      @updateList="getSubjectsList"
                      :value="params.page"
                      @input="params.page--"></subjects-table>
      <br />
      <!-- 分页器 -->
      <div>
        <el-pagination style="text-align: right"
                       background
                       :page-sizes="[5, 10, 20, 50]"
                       :page-size="params.pagesize"
                       :current-page="params.page"
                       :total="subjectsList.counts"
                       layout=" prev, pager, next,sizes, jumper"
                       @size-change="sizeChange"
                       @current-change="numChange">
        </el-pagination>
      </div>
      <!-- 添加弹框 -->
      <el-dialog title="新增学科"
                 :visible.sync="isAddShow"
                 width="25%">
        <subjects-add @close="isAddShow = false"
                      @updateList="clearSearch"
                      v-if="isAddShow"></subjects-add>
      </el-dialog>

      <!-- 修改弹框 -->
      <el-dialog title="修改学科"
                 :visible.sync="isEditShow"
                 width="25%">
        <subjects-edit :getid="id"
                       @close="isEditShow = false"
                       @updateList="clearSearch"
                       v-if="isEditShow"></subjects-edit>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects'
import subjectsTable from '@/module-hmmm/components/subjects-table'
import subjectsAdd from '@/module-hmmm/components/subjects-add'
import subjectsEdit from '@/module-hmmm/components/subjects-edit'
export default {
  name: 'Subjects',
  components: {
    subjectsTable,
    subjectsAdd,
    subjectsEdit
  },
  data() {
    return {
      subjectsList: [], //存放学科列表数据
      params: {
        page: 1, //当前页数
        pagesize: 10, //每页条数
        subjectName: null //学科名称
      },
      //搜索表单
      SearchFrom: {
        searchName: ''
      },
      isAddShow: false, //添加弹框显示
      isEditShow: false, //添加弹框显示
      id: '' //存放获得的id
    }
  },
  created() {
    this.getSubjectsList()
  },
  methods: {
    //   获取学科列表
    async getSubjectsList() {
      try {
        let { data: res } = await list(this.params)
        // console.log(res)
        this.subjectsList = res
      } catch (error) {
        console.dir(error)
        this.$message.error('学科列表获取失败')
      }
    },
    // 搜索按钮的点击事件
    clickSearch() {
      this.params.page = 1
      this.params.subjectName = this.SearchFrom.searchName
      this.getSubjectsList()
    },
    // 清楚按钮的点击事件
    clearSearch() {
      this.params.subjectName = ''
      this.$refs.SearchFrom.resetFields()
      this.params.page = 1

      this.getSubjectsList()
    },
    sizeChange(val) {
      //val是最新的每页数量
      this.params.pagesize = val
      this.getSubjectsList()
    },
    numChange(val) {
      //val是最新的页码数
      this.params.page = val
      this.getSubjectsList()
    },
    getid(val) {
      this.id = val
      this.isEditShow = true
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 10px;
  .colInput {
    height: 36px;
  }
  .colright {
    float: right;
    height: 35px;
  }
  .el-alert {
    margin-bottom: 15px;
  }
}
</style>
